<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园宝贝集市个人中心</title>
    <style>
        /* 添加CSS样式以美化页面 */
        body {
			background-image: url('../static/images/经贸.png'); /* 替换 'background.jpg' 为你的背景图片路径 */
			background-size: cover;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
		header {
		    background-color: #007bff;
		    color: #fff;
		    padding: 20px;
		}
		
		header h1 {
		    /* font-size: 28px; */
		    margin-bottom: 10px;
		}
		nav ul {
		    list-style-type: none;
		}
		
		nav ul li {
		    display: inline;
		    margin-right: 20px;
		}
		
		nav ul li a {
		    color: #fff;
		    text-decoration: none;
			font-size: 20px;
		}
        .container {
            width: 40%;
            margin: 20px auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 20px;
			margin-top: 50px;
			
        }
        h1, p {
            text-align: center;
			font-size:20px;
        }
		h1{
			font-size:50px;
			
		}
        .profile-info {
			padding-top:50px ;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
            padding-bottom: 20px;
            margin-bottom: 20px;
			border-bottom: 1px solid #ccc;
        }
        .profile-info img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 20px;
        }
        .profile-details {
            flex: 1;
			
        }
		.profile-details img{
			padding-left: 10px;
		}
        .profile-details h2 {
            margin-top: 0;
        }
        .profile-details p {
            margin: 5px 0;
			margin-top: 10px;
			/* margin-left: 0; */
        }
        button {
            background-color: #4caf50;
            color: #fff;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
	<header>
	    <h1>校园宝贝集市</h1>
	    <nav>
	        <ul>
	            <li><a href="./index.html">首页</a></li>
	            <li><a href="#">商品列表</a></li>
	            <li><a href="#">个人中心</a></li>
	            <li><a href="./login.html">退出</a></li>
	        </ul>
	    </nav>
	</header>
    <div class="container">
		<h1>个人信息中心</h1>
		<div class="profile-info">
			<img src="../static/images/商品.jpg" alt="个人头像">
			<div class="profile-details">
				<p><strong>用户名：</strong> {{ user.username }}</p>
				<p><strong>手机号码：</strong> {{ user.phone_number }}</p>
				<p><strong>真实姓名：</strong> {{ user.real_name }}</p>
				<p><strong>班级：</strong> {{ user.class }}</p>
				<p><strong>学号：</strong> {{ user.student_id }}</p>
				<p><strong>宿舍号：</strong> {{ user.dormitory }}</p>
				<p><strong>性别：</strong> {{ user.gender }}</p>
				<p><strong>创建时间：</strong> {{ user.created_at }}</p>
			</div>
		</div>
		<button onclick="editProfile()">编辑个人信息</button>
	</div>
	<footer>
		<p>&copy; 2024 校园宝贝集市</p>
	</footer>
    
</body>
<script>
    function editProfile() {
        // 获取个人信息表单
        var form = document.getElementById('profile-form');
        
        // 获取表单元素
        var username = form.elements['username'];
        var phone = form.elements['phone'];
        var realname = form.elements['realname'];
        var class = form.elements['class'];
        var dormitory = form.elements['dormitory'];
        var gender = form.elements['gender'];
        
        // 编辑个人信息
        username.value = 'New Username';
        phone.value = 'New Phone Number';
        realname.value = 'New Realname';
        class.value = 'New Class';
        dormitory.value = 'New Dormitory';
        gender.value = 'New Gender';
        
        // 提交表单
        form.submit();
		function editProfile() {
            // 编辑个人信息的逻辑可以在这里实现
            alert("编辑个人信息");
        }
    }
</script>

</html> -->
<!-- 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园宝贝集市 - 个人信息页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<style>
	/* Resetting default browser styles */
	body, h1, h2, ul, li, p {
	    margin: 0;
	    padding: 0;
		margin-top: 20px;
	}
	
	/* Global styles */
	body {
	    font-family: Arial, sans-serif;
	    background-color: #f0f0f0;
	    color: #333;
	}
	
	.container {
	    max-width: 800px;
	    margin: 0 auto;
	    padding: 20px;
	}
	
	header {
	    background-color: #007bff;
	    color: #fff;
	    padding: 20px;
	}
	
	header h1 {
	    font-size: 28px;
	    margin-bottom: 10px;
	}
	
	nav ul {
	    list-style-type: none;
	}
	
	nav ul li {
	    display: inline;
	    margin-right: 20px;
	}
	
	nav ul li a {
	    color: #fff;
	    text-decoration: none;
	}
	
	main {
	    padding: 20px;
		background-color: #FEC;
		width: 40%;
		text-align: center;
	}
	
	.registration {
	    background-color: #fff;
	    padding: 20px;
	    border-radius: 5px;
	    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}
	
	.form-group {
	    margin-bottom: 15px;
	}
	
	label {
	    display: block;
	    font-weight: bold;
	}
	
	input[type="text"],
	select {
	    width: 100%;
	    padding: 10px;
	    border: 1px solid #ccc;
	    border-radius: 5px;
	    box-sizing: border-box;
	}
	
	button[type="submit"] {
	    background-color: #007bff;
	    color: #fff;
	    padding: 10px 20px;
	    border: none;
	    border-radius: 5px;
	    cursor: pointer;
	}
	
	button[type="submit"]:hover {
	    background-color: #0056b3;
	}
	
	footer {
	    text-align: center;
	    margin-top: 20px;
	    padding: 10px 0;
	    background-color: #007bff;
	    color: #fff;
	}

</style>
<body>
    <header>
        <h1>校园宝贝集市</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">商品列表</a></li>
                <li><a href="#">个人中心</a></li>
                <li><a href="#">退出</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="user-info">
            <h2>个人信息</h2>
            <div class="info">
                <p><strong>用户名：</strong> JohnDoe</p>
                <p><strong>手机号码：</strong> 12345678901</p>
                <p><strong>真实姓名：</strong> John Doe</p>
                <p><strong>班级：</strong> Class A</p>
                <p><strong>学号：</strong> 123456789012</p>
                <p><strong>宿舍号：</strong> Dormitory 101</p>
                <p><strong>性别：</strong> 男</p>
                <p><strong>创建时间：</strong> 2024-04-28 12:00:00</p>
                <p><strong>头像：</strong> <img src="avatar.jpg" alt="Avatar"></p>
            </div>
			<button onclick="editProfile()">编辑个人信息</button>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 校园宝贝集市</p>
    </footer>
</body>
<script>
        // JavaScript代码可以放在这里
        function editProfile() {
            // 编辑个人信息的逻辑可以在这里实现
            alert("编辑个人信息");
        }
    </script>
</html>  -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园宝贝集市 - 商品详情</title>
    <link rel="stylesheet" href="styles.css">

</head>
<style>
	/* Resetting default browser styles */
	body, h1, h2, ul, li, p {
	    margin: 0;
	    padding: 0;
	}
	
	/* Global styles */
	body {
	    font-family: Arial, sans-serif;
	    background-color: #f0f0f0;
	    color: #333;
	}
	
	header {
	    background-color: #007bff;
	    color: #fff;
	    padding: 20px;
	}
	
	header h1 {
	    font-size: 28px;
	    margin-bottom: 10px;
	}
	
	nav ul {
	    list-style-type: none;
	}
	
	nav ul li {
	    display: inline;
	    margin-right: 20px;
	}
	
	nav ul li a {
	    color: #fff;
	    text-decoration: none;
	}
	
	main {
	    padding: 20px;
	}
	
	.product-details {
	    display: flex;
	    margin-bottom: 20px;
	}
	
	.product-image {
	    flex: 1;
	}
	
	.product-image img {
	    max-width: 100%;
	    height: auto;
	}
	
	.product-info {
	    flex: 2;
	    padding: 20px;
	    background-color: #fff;
	    border-radius: 5px;
	    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}
	
	.product-info h2 {
	    font-size: 24px;
	    margin-bottom: 10px;
	}
	
	.product-info h3 {
	    font-size: 20px;
	    margin-top: 20px;
	}
	
	.product-info p {
	    margin-bottom: 10px;
	}
	
	footer {
	    text-align: center;
	    margin-top: 20px;
	    padding: 10px 0;
	    background-color: #007bff;
	    color: #fff;
	}
    button{
        /* float: right;
        margin-bottom: 0; */
        background-color: #007bff;
            color: #fff;
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 10px;
            transition: background-color 0.3s ease;
      
    }

</style>
<body>

	{%include 'nav.html' %}


    <main>
        <section class="product-details">
            <div class="product-image">
                <img src="../static/images/商品.jpg" alt="商品图片">
            </div>
            <div class="product-info">
                <h2>红米K70</h2>
                <p>ID: 123456</p>
                <p>成色: 99新</p>
                <p>价格: ¥1850.00</p>
                <p>数量: 3</p>
                <p>销量: 50</p>
                <p>交易方式: 货到付款</p>
                <p>是否下架: 否</p>
                <h3>商品详细信息</h3>
                <p>第二代骁龙8旗舰芯，2K屏</p>
                <button type="submit">立即购买</button>
                <button type="submit">联系商家</button>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 校园宝贝集市</p>
    </footer>
</body>
</html>